import Vue from 'vue'
import App from './App.vue'
// element-ui
import ElementUI from 'element-ui'
// element-ui 样式
import 'element-ui/lib/theme-chalk/index.css'
// 路由
import router from './router'
// vuex实例
import store from './store'
// mock.js
import './api/mock'
// js-cookie - 缓存
import Cookie from 'js-cookie'

Vue.config.productionTip = false

Vue.use(ElementUI)

// 全局导航守卫 (箭头函数)
router.beforeEach((to, from, next) => {
  const token = Cookie.get('token');
  // 不存在token值(未登录),且不在登录页面 -> 跳转至登录页面
  if (!token && to.name !== 'login') {
    next({ name: 'login' });
  } else if (token && to.name === 'login') { // 如果token值存在, 且为登录页面, 则跳转至主页
    next({ name: 'home' });
  } else if (to.matched.length === 0) { // 如果未匹配到相同路由,则404,三秒后跳转回主页
    next('/404');
    setTimeout(() => {
      next('/home')
    }, 3000);
  } else { // 其他情况不作处理
    next();
  }
})

new Vue({
  router,
  store,
  // 避免刷新出现空白页的情况 - 因为router动态注册是在store当中,刷新会导致数据清空
  created() {
    store.commit('addMenuOrRouter', router);
  },
  render: h => h(App),
}).$mount('#app')
